<template>
	<div style="border-radius: 5px; padding: 10px;">
		<el-form ref="form" :model="form" label-width="100px" size="small" style="border: solid 1px #EBEEF5;">
			<el-row style="margin-top: 10px;">
				<el-col :span="8">
					<el-form-item label="操作备注:">
						<el-input style="width: 80%;" clearable v-model="form.remark" placeholder="请输入操作备注"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="操作人:">
						<el-input style="width: 80%;" clearable v-model="form.loginName" placeholder="请输入操作人"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<el-table :data="logData" border style="margin-top: 10px;" v-loading="dataListLoading">
			<el-table-column fixed prop="logId" label="logId" align="center" width="100">
			</el-table-column>
			<el-table-column prop="loginName" label="操作人" align="center" width="150">
			</el-table-column>
			<el-table-column prop="remark" label="操作备注" align="center">
			</el-table-column>
			<el-table-column prop="managerIp" label="操作人IP" align="center">
			</el-table-column>
			<el-table-column prop="param" label="参数" show-overflow-tooltip align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="createTime" label="操作日期" align="center">
				<template slot-scope="scope">
					{{scope.row.createTime | formatDate}}
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"
		 :page-sizes="[10, 15, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
		</el-pagination>

	</div>
</template>

<script>
	import {
		getLogList
	} from '@/api/system/log/log.js'
	import {
		formatDate
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				form: {},
				logData: [],
				dataListLoading: false,
				pageIndex: 1,
				pageSize: 15,
				pageTotal: 0,
			}
		},
		filters: {
			formatDate(time) {
				var date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		},
		mounted: function() {
			this.getLogList(this.form.remark, this.form.loginName, this.pageIndex, this.pageSize)
		},
		methods: {
			handleSizeChange(val) {
				this.pageSize = val
				this.pageIndex = 1
				this.getLogList(this.form.remark, this.form.loginName, this.pageIndex, this.pageSize)
			},
			handleCurrentChange(val) {
				this.pageIndex = val
				this.getLogList(this.form.remark, this.form.loginName, this.pageIndex, this.pageSize)
			},
			getLogList(remark, loginName, index, size) {
				getLogList(remark, loginName, index, size).then(data => {
					if (data.code == '0000') {
						this.logData = data.data
						this.pageTotal = data.total
					}
				})
			},
			onSubmit() {
				this.getLogList(this.form.remark, this.form.loginName, this.pageIndex, this.pageSize)
			},
		},
	}
</script>

<style>
</style>
